import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
import vuexPersist from "vuex-persist";

export default new Vuex.Store({
  state: {
    list: [
      { title: "任务1", status: false, id: 1 },
      { title: "任务1", status: false, id: 2 },
    ],
    //所有的任务
    result: [],
    //复选框组选中的值
    checked: false,
    // 全选按钮的v-model值
  },
  mutations: {
    add(state, title) {
      if (title == "") {
        alert("为空不能添加");
        return false;
      }
      state.list.push({ title, status: false, id: state.list.length + 1 });
    },
    remove(state, index) {
      state.list.splice(index, 1);
    },
    change(state) {
      if (state.result.length == state.list.length) {
        state.checked = true;
      } else {
        state.checked = false;
      }
    },
    //点击上面的复选框的时候判断是不是全选了 如果是全选就让全选按钮变成true 否则就变成false
    checkall(state) {
      if (state.checked == true) {
        state.result = state.list;
      } else {
        state.result = [];
      }
    },
    //全选按钮 控制上面的复选框

    removeall(state) {
      state.list = state.list.filter((item) => {
        return state.result.includes(item) == false;
      });
      state.result = [];
      //把不删的留下来
    },
  },
  actions: {},
  modules: {},
  plugins: [
    new vuexPersist({
      storage: window.localStorage,
    }).plugin,
  ],
});
